<!--
 * @Date: 2024-06-13 17:50:38
 * @LastEditTime: 2024-06-14 16:42:02
 * @Description: lol-技能图标
-->
<template>
  <view class="w-6 h-6 relative" :style="mystyle">
    <view class="absolute -top-4 w-full text-center">
      <view v-if="starNum === 2">
        <i class="star2"></i>
        <i class="star2"></i>
      </view>
      <view v-if="starNum === 3">
        <i class="star3"></i>
        <i class="star3"></i>
        <i class="star3"></i>
      </view>
    </view>

    <img
      v-if="iconId"
      class="w-6 h-6"
      :class="myclass"
      :style="mystyle"
      :src="`https://wegame.gtimg.com/g.26-r.c2d3c/helper/tft/${season}/images/chess/${iconId}.png`"
    />
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
const mystyle = ref({});
const myclass = ref("");
const props = defineProps({
  iconId: [String, Number],
  season: [String],
  basePrice: [Number],
  starNum: [Number],
  size: [String, Number],
});

watch(
  props,
  () => {
    if (props.size) {
      mystyle.value = {
        width: `${props.size}rpx`,
        height: `${props.size}rpx`,
      };
    }
    if (props.basePrice) {
      myclass.value = `cost-${props.basePrice}`;
    }
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss">
.cost-1 {
  border: 2px solid #707070;
}
.cost-2 {
  border: 2px solid #10a17b;
}
.cost-3 {
  border: 2px solid #1d70b8;
}
.cost-4 {
  border: 2px solid #a635ba;
}
.cost-5 {
  border: 2px solid #e09e26;
}
.star3 {
  display: inline-block;
  width: 18rpx;
  height: 18rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-image: url();
  background-size: 100% 100%;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.star2 {
  display: inline-block;
  width: 18rpx;
  height: 18rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-image: url();
}
</style>
